<template>
  <div class="indexBox">
    <el-header class="header">
      <h1>千锋会议室管理系统</h1>
      <div class="userMsg">
        <el-tooltip
          content="<a href='/quit' >注销</a>"
          raw-content
        >
          <a @click="$router.push('/my')">{{ uName }}</a>
        </el-tooltip>
      </div>
    </el-header>
    <el-container class="container">
      <el-aside class="aside">
        <RouterView></RouterView>
      </el-aside>
      <el-main class="main">
        <Suspense>
          <RouterView name="main"></RouterView>
        </Suspense>
      </el-main>
    </el-container>
    <el-footer class="footer">
      版权归千锋所有
      仿冒必究
      备案号
    </el-footer>
  </div>
</template>

<script setup>
import { RouterView } from "vue-router";
import { computed } from "vue";
import { useRouter} from "vue-router";
const router = useRouter()
// vuex
// import { useStore } from "vuex";
// const store = useStore();
// pinia
import { useUserStore } from "../storesPinia/user";
const userStore = useUserStore();

// 登录拦截：如果没有token，直接跳转到登录页面
// const userMsg = localStorage.getItem("userMsg") ? JSON.parse(localStorage.getItem("userMsg")) : {};
// const token = userMsg.token;
// const uName = ref(userMsg.uName);

// 通过状态管理器获取用户状态
// vuex
// const token = computed(()=>{
//   return store.state.user.token;
// })
// const uName = computed(()=>{
//   return store.state.user.uName;
// })

// pinia
const token = computed(()=>{
  return userStore.token;
})
const uName = computed(()=>{
  return userStore.uName;
})

if(!token){
  router.push("/login");
}
</script>

<style>
.indexBox{
  height:100%;
  display: flex;
  flex-direction: column;
}

.indexBox .header{
  height: 60px;
  background: #1a72fe;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.indexBox .footer{
  color: #fff;
  text-align: center;
  height:20px;
  font-size: 12px;
  line-height: 20px;
  background: #1a72fe;
}
.indexBox .header a{
  color: #fff;
  text-decoration: underline;
}

.indexBox .container{
  flex:1;
  overflow: auto;
  height:100%;
}

.indexBox .container .aside{
  width: 200px;
  height: 100%;
}

@media (max-width:800px) {
  .indexBox .container .aside{
    width: 20%;
    height: 100%;
  }
}

</style>
